<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .mui-pciker-list {
            z-index: 1;
            -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
            -webkit-transform: perspective(750pt) rotateY(0) rotateX(0);
            /* transform: perspective(750pt) rotateY(0) rotateX(0); */
        }
    </style>
</head>
<body>
<svg height="108" version="1.1" width="108" xmlns="http://www.w3.org/2000/svg"
     style="overflow: hidden; position: relative; left: -0.5px;">
    <path class="ring" rate="${deal.attrs.rate}" fill="none" x="54" y="7" r="47"
          stroke="#fd30ae" d="M10,0
                             A47,47
                             ,0
                             ,1
                             ,10
                             ,30
                             ,9" stroke-width="4" />
</svg>

<script>
    var x='';
    var c=1;
    for (let i=0;i<30;i++){
        c-=5;
       x+= ' <li class="visible highlight" style="transform-origin: center center -90px; transform: translateZ(90px) rotateX('+c+'deg);\">2016</li>'
    }
    for (let i=30;i<60;i++){
        c+=5;
        x+= ' <li class="visible highlight" style="transform-origin: center center -90px; transform: translateZ(90px) rotateX('+c+'deg);\">2016</li>'
    }
    document.getElementsByClassName("mui-pciker-list")[0].innerHTML+=x
</script>
</body>
</html>